<template>
	<view class="find-page">
		<!-- 背景图 -->
		<image class="find-page__bg" src="/static/images/find/顶部戏台.png" mode="aspectFill" />
		<!-- 导航操作按钮 -->
		<view class="find-page-nav">
			<view class="find-page-nav__btn" @click="isShowUpload=true">
				<image class="find-page-nav__icon" src="/static/images/find/上传%20(2).png" mode=""></image>
				<text>上传作品</text>
			</view>
			<view class="find-page-nav__btn" @click="onClickRule">
				<image class="find-page-nav__icon" src="/static/images/find/icon-文案及活动规则申请.png" mode=""></image>
				<text>活动规则</text>
			</view>
			<view class="find-page-nav__btn" @click="onClickRanking">
				<image class="find-page-nav__icon" src="/static/images/find/上传%20(2).png" mode=""></image>
				<text>综合排名</text>
			</view>
		</view>
		<!-- 数据块 -->
		<view class="find-page-data">
			<view class="find-page-data__block">
				<view class="">
					<image class="find-page-data__icon" src="../../static/images/find/参赛作品.png" mode=""></image>
					<text>参赛作品</text>
				</view>
				<text class="find-page-data__biglabel">3170</text>
				<text>部</text>
			</view>
			<view class="find-page-data__block">
				<view class="">
					<image class="find-page-data__icon" src="../../static/images/find/投票数.png" mode=""></image>
					<text>总投票数</text>
				</view>
				<text class="find-page-data__biglabel">371.56万</text>
				<text>票</text>
			</view>
			<view class="find-page-data__block">
				<view class="">
					<image class="find-page-data__icon" src="../../static/images/find/浏览量.png" mode=""></image>
					<text>页面浏览量</text>
				</view>
				<text class="find-page-data__biglabel">651.20万</text>
				<text>条</text>
			</view>
		</view>
		<!-- tabbar -->
		<view class="find-page-tabbar">
			<view class="find-page-tabbar__btn active">
				村宝
			</view>
			<view class="find-page-tabbar__btn">
				村戏（歌）
			</view>
			<view class="find-page-tabbar__btn">
				村画
			</view>
		</view>
		<!-- 搜索框 -->
		<view class="find-page-search">
			<view class="find-page-search__input">
				<image class="find-page-search__icon" src="../../static/images/find/搜索.png" mode=""></image>
				<input type="text" value="" placeholder-class="find-page-search__placeholder"
					placeholder="点击搜索参赛作品名称或序号" />
			</view>
			<view class="find-page-search__btn">
				查询
			</view>
		</view>
		<!-- 倒计时 -->
		<view class="find-page-lasttime">
			<text>第二轮投票剩余时间：</text>
			<text class="find-page-lasttime__time">12:05:48</text>
		</view>
		<!-- 投票列表 -->
		<view class="find-page-list">
			<view class="find-page-list-item" v-for="index in 8" @click="onClickItem">
				<view class="find-page-list-item__top">
					<!-- 角标 -->
					<view class="find-page-list-item__tag">
						1
					</view>
					<!-- 封面 -->
					<image class="find-page-list-item__cover" :src="`/static/images/find/${index}.png`" mode=""></image>
					<!-- 播放键 -->
					<image class="find-page-list-item__play" src="/static/images/play.png" mode=""></image>
				</view>
				<view class="find-page-list-item__mid">
					<view class="find-page-list-item__title">
						朱沙欧《鹤鸣黄河岸》
					</view>
					<view class="find-page-list-item__data">
						<view>开封市</view>
						<view>票数<text>501</text></view>
					</view>
				</view>
				<view class="find-page-list-item__btm">
					投他一票
				</view>
			</view>
		</view>

		<view class="find-page-data-copy">
			<image src="../../static/images/find/注释.png" mode=""></image>
			<text>本活动最终解释权归开封文化豫约所有</text>
		</view>

		<!-- 装饰品 -->
		<view class="find-page-data-decorate">
			<image class="find-page-data-decorate__left" src="../../static/images/find/左.png" mode=""></image>
			<image class="find-page-data-decorate__right" src="../../static/images/find/右.png" mode=""></image>
		</view>
		
		<!-- 上传作品 -->
		<view class="find-page-upload" v-if="isShowUpload">
			<view class="find-page-upload__bg">
				<image class="find-page-upload__btn" src="../../static/images/find/我知道了.png" @click="isShowUpload=false" ></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				isShowUpload: false,
			}
		},
		methods:{
			onClickRule(){
				uni.navigateTo({
					url: '/pages/findRule/findRule'
				});
			},
			onClickRanking(){
				uni.navigateTo({
					url: '/pages/findRanking/findRanking'
				});
			},
			onClickItem(){
				uni.navigateTo({
					url: '/pages/findDetail/findDetail'
				})
			},
		}
	}
</script>

<style lang="scss" scoped src="./find.scss">

</style>
